<template>
    <view class="normal-login-container">
        <view class="logo-content align-center justify-center flex">
            <text class="title">中运通登录</text>
        </view>
        <view class="login-form-content">
            <up-form label-width="90px">
                <div style="margin-bottom: 20px;">
                    <up-input style="height: 46px;" type="number" placeholder="请输入账号" prefixIcon="account"
                        prefixIconStyle="font-size: 22px;color: #909399" shape="circle" v-model="loginForm.username"
                        clearable></up-input>
                </div>
                <up-form-item prop="code">
                    <up-code-input mode='bottomLine' class="myCode" v-model="loginForm.code" :space="5"
                        :style="{ width: windowWidth > 375 ? '75%' : '60%' }"></up-code-input>
                    <div style="width: 80px;margin-left: 10px;">
                        <up-code ref="uCode" @change="codeChange"></up-code>
                        <up-button style="height: 35px;" type="primary" @tap="getCode"><span style="font-size: 10px;">{{
                            tips }}</span></up-button>
                    </div>
                </up-form-item>
                <view class="action-btn">
                    <button @click="userLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
                </view>
            </up-form>
            <div class="text-blue" style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
                <div @click="goPswLogin">账号密码登录</div>
            </div>
            <view class="xieyi text-center check" style="margin: 20px 0;">
                <div style="display: flex;flex-wrap: wrap;align-items: center;"
                    :style="{ padding: windowWidth > 375 ? '0 10%' : '0 5%' }">
                    <up-checkbox name="agree" usedAlone v-model:checked="isAgree">
                    </up-checkbox>
                    <view>
                        <text class="text-grey1" @click="() => isAgree = !isAgree">我已阅读并同意</text>
                        <text class="text-blue" @click="privacyAgreement">《隐私协议》</text>
                        <text class="text-grey1">和</text>
                    </view>
                    <view style="margin-left: 20px;">
                        <text class="text-blue" @click="serviceAgreement">《平安结算通商户服务协议》</text>
                    </view>
                </div>
            </view>
        </view>
        <view class="align-center justify-center flex">
            <text style="font-size: 14px;color: #e1e3e1;">若您没有账号，也可以直接登录，登录后会自动创建</text>
        </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive
} from "vue"
import {
    onLoad
} from "@dcloudio/uni-app"
import {
    codeLogin,
    getLoginCode
} from "@/api/login"
import {
    encrypt
} from "@/utils/encryption"
import {
    useUserStore
} from "@/store/modules/user"

/* hooks */
const {
    LOGIN_SUCC
} = useUserStore()



/* 数据 */
// 屏幕宽度
const windowWidth = ref(uni.getWindowInfo().screenWidth)
// 隐私政策同意
const isAgree = ref(false)
// 提示
const uToastRef = ref<any>(null)
const loginForm = reactive({
    username: "",
    code: '',
    roleCode: useUserStore().loginRole
})
// 获取验证码按钮
const uCode = ref<any>(null)
// 按钮文字
const tips = ref('')



/* 函数 */
const codeChange = (text: string) => {
    tips.value = text
}
// 获取验证码
const getCode = async () => {
    if (!loginForm.username || !(/(^1[3-9][0-9]{9}$)/g).test(loginForm.username)) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "账号必须为11位电话号码"
        })
        return
    }
    if (uCode.value?.canGetCode) {
        uToastRef.value.show({
            type: 'loading',
            message: "正在获取验证码",
            duration: -1
        })
        let codeRes = await getLoginCode({
            phone: encrypt(loginForm.username) as string
        })
        uToastRef.value.hide()
        if (codeRes.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "验证码已发送"
            })
        }
        // 通知验证码组件内部开始倒计时
        uCode.value.start()
    } else {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "倒计时结束后再发送"
        })
    }
}
// 登录
const userLogin = async () => {
    if (!loginForm.username) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "请填写账号"
        })
        return
    }
    if (!loginForm.code && loginForm.code.length !== 6) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "请填写验证码"
        })
        return
    }
    if (!isAgree.value) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "请阅读并勾选协议"
        })
        return
    }
    let params = {
        username: encrypt(loginForm.username) as string,
        code: encrypt(loginForm.code) as string,
        roleCode: loginForm.roleCode
    }
    uToastRef.value.show({
        type: 'loading',
        message: "登录中",
        duration: -1
    })
    let res = await codeLogin(params)
    uToastRef.value.hide()
    if (res.success) {
        LOGIN_SUCC(res.data, loginForm.username)
        uToastRef.value.show({
            position: "top",
            type: 'success',
            message: "登录成功",
            complete: async () => {
                uni.reLaunch({
                    url: "/pages/mine/index"
                })
            }
        })
    }
}
// 隐私协议
const privacyAgreement = () => {
    if (!isAgree.value) isAgree.value = true
    uni.navigateTo({
        url: '/pages/common/webview/index'
    })
}
// 服务协议
const serviceAgreement = () => {
    if (!isAgree.value) isAgree.value = true
    uni.navigateTo({
        url: '/pages/common/webview/pinganjiesuantong'
    })
}
// 账号密码登录
const goPswLogin = () => {
    uni.reLaunch({
        url: "/pages/login"
    })
}



/* 钩子 */
onLoad(({
    roleCode
}: any) => {
    if (roleCode) {
        loginForm.roleCode = roleCode
    }
})
</script>

<style lang="scss" scoped>
.myCode ::v-deep .u-code-input__item {
    border-bottom: 1px solid #3c9cff;
}

page {
    background-color: #ffffff;
}

.normal-login-container {
    width: 100%;

    .logo-content {
        width: 100%;
        font-size: 21px;
        text-align: center;
        padding-top: 15%;

        image {
            border-radius: 4px;
        }

        .title {
            margin-left: 10px;
        }
    }

    .login-form-content {
        text-align: center;
        margin: 20px auto;
        margin-top: 15%;
        width: 80%;

        .input-item {
            margin: 20px auto;
            background-color: #f5f6f7;
            height: 45px;
            border-radius: 20px;

            .icon {
                font-size: 38rpx;
                margin-left: 10px;
                color: #999;
            }

            .input {
                width: 100%;
                font-size: 14px;
                line-height: 20px;
                text-align: left;
                padding-left: 15px;
            }

        }

        .login-btn {
            margin-top: 40px;
            height: 45px;
        }

        .reg {
            margin-top: 15px;
        }

        .xieyi {
            color: #333;
            margin-top: 20px;
        }

        .login-code {
            height: 38px;
            float: right;

            .login-code-img {
                height: 38px;
                position: absolute;
                margin-left: 10px;
                width: 200rpx;
            }
        }
    }
}
</style>